<template>
  <main-page>
    <div slot="body">
      <el-tabs v-model="tab" @tab-click="handleClick">
        <el-tab-pane label="爬虫规则" name="splide">
          <el-form :model="splideForm" ref="splideForm" label-width="100px" class="splideForm">
            <template v-for="(form, index) in splideForm.splides">
              <el-form-item
                :label="'名称' + index"
                :prop="'splides.' + index + '.name'"
                :key="'名称' + index"
                :rules="{
                  required: true, message: '名称不能为空', trigger: 'blur'
                }"
              >
                <el-input v-model="form.name" placeholder="规则名称"></el-input>
              </el-form-item>
              <el-form-item
                :label="'域名' + index"
                :prop="'splides.' + index + '.url'"
                :key="'域名' + index"
                :rules="[
                  {required: true, message: '域名不能为空', trigger: 'blur'},
                  { type: 'url', message: '请输入正确的爬取地址', trigger: ['blur', 'change'] }
                ]"
              >
                <el-input v-model="form.url" placeholder="爬取地址"></el-input>
                <el-button @click.prevent="removeSplide(form)">删除</el-button>
              </el-form-item>
            </template>
            <el-form-item>
              <el-button @click="addSplide">添加规则</el-button>
              <el-button type="primary" @click="submitForm('splideForm')">提交</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </main-page>
</template>

<script>
import {
  saveGlobalSetting,
  getGlobalSettingAllList
} from "api/GlobalSettingApi";

import { config } from "assets/js/Data";

export default {
  name: "SettingIndex",
  data() {
    return {
      tab: config.setting.SPLIDE,
      settingForm: {
        signReward: 20
      },
      splideForm: {
        settingType: "",
        splides: [{ name: "", url: "" }]
      },
      form: {}
    };
  },
  methods: {
    handleClick(tab, event) {},
    submitForm(form) {
      this.splideForm.settingType = this.tab;

      if (this.tab == config.setting.SPLIDE) {
        this.form = this.splideForm;
      }

      this.$refs[form].validate(valid => {
        if (valid) {
          saveGlobalSetting(this.form).then(res => {
            if (res) {
              this.$base.showOk();
            }
          });
        } else {
          return false;
        }
      });
    },
    addSplide() {
      this.splideForm.splides.push({ name: "", url: "" });
    },
    removeSplide(splide) {
      if (this.splideForm.splides.length != 1) {
        var index = this.splideForm.splides.indexOf(splide);
        if (index !== -1) {
          this.splideForm.splides.splice(index, 1);
        }
      }
    },
    getGlobalSettings() {
      getGlobalSettingAllList({
        settingType: this.tab
      }).then(res => {
        if (res) {
          if (this.tab == config.setting.SPLIDE) {
            this.splideForm.splides = res;
          }
        }
      });
    }
  },
  created() {
    this.getGlobalSettings();
  },
  watch: {
    tab() {
      this.getGlobalSettings();
    }
  }
};
</script>

<style lang="stylus" scoped>
.splideForm {
  width: 550px;

  & >>> .el-input {
    margin-right: 10px;
    width: 300px;
    vertical-align: top;
  }
}
</style>
